<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 380px;
      padding: 15px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      margin: 0;
      background-color: #f5f5f5;
      color: #333;
    }

    .container {
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    h2 {
      margin: 0 0 20px 0;
      color: #1565C0;
      font-size: 18px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    h2::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231565C0"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-4h2v2h-2zm1-10c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>') center/contain no-repeat;
    }

    .search-container {
      position: relative;
      margin-bottom: 15px;
    }

    .search-input {
      width: 100%;
      padding: 10px 12px 10px 36px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 14px;
      background-color: white;
      color: #333;
      outline: none;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    .search-input::placeholder {
      color: #999;
    }

    .search-container::before {
      content: '';
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') center/contain no-repeat;
    }

    .search-input:hover {
      border-color: #bbdefb;
    }

    .search-input:focus {
      border-color: #2196F3;
      box-shadow: 0 0 0 3px rgba(33,150,243,0.1);
    }

    .select-container {
      position: relative;
      margin-bottom: 15px;
    }

    select {
      width: 100%;
      padding: 8px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      font-size: 14px;
      background-color: white;
      color: #333;
      outline: none;
      transition: all 0.2s ease;
      margin-bottom: 0;
      max-height: 200px;
    }

    select:hover {
      border-color: #bbdefb;
    }

    select:focus {
      border-color: #2196F3;
      box-shadow: 0 0 0 3px rgba(33,150,243,0.1);
    }

    select option {
      padding: 8px;
      cursor: pointer;
    }

    select option:hover {
      background-color: #f5f5f5;
    }

    .no-results {
      padding: 12px;
      color: #666;
      font-size: 13px;
      text-align: center;
      background: #f5f5f5;
      border-radius: 8px;
      margin-top: 8px;
      border: 1px dashed #ddd;
    }

    button {
      width: 100%;
      padding: 12px;
      background-color: #2196F3;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    button::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>') center/contain no-repeat;
    }

    button:hover {
      background-color: #1976D2;
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(33,150,243,0.2);
    }

    button:active {
      background-color: #1565C0;
      transform: translateY(0);
    }

    button:disabled {
      background-color: #90caf9;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .status {
      margin-top: 15px;
      padding: 12px;
      border-radius: 8px;
      font-size: 13px;
      display: none;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-5px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .status.success {
      background-color: #E8F5E9;
      color: #2E7D32;
      border: 1px solid #A5D6A7;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .status.success::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%232E7D32"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') center/contain no-repeat;
    }

    .status.error {
      background-color: #FFEBEE;
      color: #C62828;
      border: 1px solid #FFCDD2;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .status.error::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23C62828"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>') center/contain no-repeat;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Cookie复制工具</h2>
    <div class="search-container">
      <input type="text" id="searchInput" class="search-input" placeholder="搜索标签页...">
    </div>
    <div class="select-container">
      <select id="tabList" title="选择要复制Cookie的标签页" size="6">
        <option value="" disabled selected>选择源标签页</option>
      </select>
      <div id="noResults" class="no-results" style="display: none;">
        没有找到匹配的标签页
      </div>
    </div>
    <button id="copyButton">复制Cookie到当前页面</button>
    <div id="status" class="status"></div>
  </div>
  <script src="popup.js"></script>
</body>
</html> 